<template>
    <div>
        <div style="margin-bottom: 20px">
            <el-input v-model="query.userId" placeholder="请输入用户id" style="width: 200px;margin-right: 20px;"></el-input>
            <el-input v-model="query.roomId" placeholder="请输入主播id" style="width: 200px;margin-right: 20px;"></el-input>
<!--           
             <el-date-picker
      v-model="timeArr"
      @change="change2"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker> -->

            <el-button type="primary" @click="select">查询</el-button>
        </div>
        <div>
            <el-button type="primary" @click="add(null)">捐赠</el-button>
            <!-- <el-button type="danger" @click="handDelete" :disabled="!ids.length">批量删除</el-button> -->

        </div>
        <el-table border :data="list" style="width: 100%;margin-top: 20px;"  @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
          </el-table-column>
            <el-table-column prop="userId" label="用户id" />
            <el-table-column prop="roomId" label="主播id" />
            <el-table-column prop="amount" label="金额" />
            <el-table-column prop="time" label="时间" />
        
<el-table-column label="操作">
    <template #default="scope">
                    <!-- {{scope.row}} -->
                    <el-button type="text" @click="add(scope.row)">修改</el-button>
                    <el-button type="text" @click="handDelete(scope.row)" >删除</el-button>
                </template>
</el-table-column>
<!-- <el-table-column prop="address" label="Address" /> -->
</el-table>
<el-pagination v-show="total>0" style="margin-top: 20px;" :currentPage="query.page" :page-sizes="[100, 200, 300, 400]" background layout="total,  prev, pager, next, jumper" :page-size="query.size" :total="total" @current-change="currentChange"></el-pagination>
<el-dialog v-model="dialogVisible" title="捐赠" width="30%" :before-close="handleClose">
    <el-form :model="form" :rules="rules" ref="formRef" :inline="false" size="default">
        <el-form-item prop="userId" style="width: 100%;">
            <el-input v-model="form.userId" placeholder="请输入用户id" style="width: 100%;">
            </el-input>
        </el-form-item>
        <el-form-item prop="roomId" style="width: 100%;">
            <el-input v-model="form.roomId" placeholder="请输入主播id" style="width: 100%;">
            </el-input>
        </el-form-item>
        <el-form-item prop="amount" style="width: 100%;">
            <el-input v-model="form.amount" placeholder="请输入打赏金额" style="width: 100%;">
            </el-input>
        </el-form-item>
        <el-form-item prop="time" style="width: 100%;">
            <el-date-picker style="width:100%"
      v-model="time"
     @change="change"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
        </el-form-item>
    </el-form>
    <template #footer>
  <span class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="submit">
      确定
    </el-button>
  </span>
</template>
</el-dialog>
</div>
</template>
<script setup>
    import {
        onMounted,
        ref,
        reactive
    } from 'vue'
    import {
       getList,addJilu,updateJilu,deleteJilu
    } from "~/api/xm.js"
    import {
        useStore
    } from 'vuex'
    import {
        ElMessage,
        ElMessageBox
    } from 'element-plus'
    const store = useStore()
    const ids = ref([])
    const list = ref([])
    const total = ref(0)
     const time = ref('')
    const type = ref('')
    const id = ref('')
    const dialogVisible = ref(false)
    const query = ref({
        page: 1,
        size: 10,
        userId:'',
        roomId:'',
        endTime:'',
        startTime:''
    })
    const timeArr=ref([])
    const form = reactive({
        userId: "",
        roomId:'',
        time:'',
        amount:''
    })
function  change2(e){
    query.value.startTime=getTime(e[0])
    query.value.endTime=getTime(e[1])
    console.log(query);
}
    function currentChange(e) {
        query.value.page = e
        select()
        console.log(e);
    }
function change(e){
   let t= new Date(e)
  
   form.time= getTime(t)
    // form.time=
}
function getTime(t){
return `${t.getFullYear()}-${(t.getMonth()+1)>9?(t.getMonth()+1):'0'+(t.getMonth()+1)}-${t.getDate()>9?t.getDate():'0'+t.getDate()} ${t.getHours()>9?t.getHours():'0'+t.getHours()}:${t.getMinutes()>9?t.getMinutes():'0'+t.getMinutes()}:${t.getSeconds()>9?t.getSeconds():'0'+t.getSeconds()}`
}
    function handleSelectionChange(e) {

        ids.value = e.map(v => v.id)
        console.log(ids.value);
    }
    const rules = {
        userId: [{
            required: true,
            message: '用户id不能为空',
            trigger: 'blur',
        }],
          roomId: [{
            required: true,
            message: '主播id不能为空',
            trigger: 'blur',
        }],
          amount: [{
            required: true,
            message: '金额不能为空',
            trigger: 'blur',
        }],
          time: [{
            required: true,
            message: '时间不能为空',
            trigger: 'blur',
        }],
    }
    onMounted(() => {
        select()
    })

    function handDelete(row) {
        let id = row.id ? row.id : ids.value.join(',')
        console.log(id);
        ElMessageBox.confirm(
                `是否删除id为${id}的数据?`,
                'Warning', {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消删除',
                    type: 'warning',
                }
            )
            .then(() => {
                deleteJilu(id).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '刪除成功',
                        })
                        select()
                    }
                })

            })

    }

    function add(e) {
        type.value = "add"
        dialogVisible.value = true
          form.userId = ''
            form.roomId =''
            form.amount = ''
            form.time = ''
             time.value=''
        if (e.id) {
            id.value = e.id
            type.value = "edit"
            form.userId = e.userId
            form.roomId = e.roomId
            form.amount = e.amount
          let t= new Date( e.time)
          form.time=getTime(t)
          time.value=t
          console.log(t);
        }
    }

    function select() {
        getList(query.value).then(res => {
            total.value = res.data.total
            list.value = res.data.list
            console.log(res);
        })
    }
    const formRef = ref(null)
    const rowId = ref('')

    function submit() {
        formRef.value.validate((valid) => {
            if (valid) {
                if (type.value == "add") {
                    addJilu(form).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: '捐赠成功',
                            })
                            dialogVisible.value = false
                            select()
                        }

                    })
                } else {
                    updateJilu({...form,id:id.value}).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: '捐赠成功',
                            })
                            dialogVisible.value = false
                            select()
                        }
                    })
                }


            }
        })
    }

    function deleteRow(row) {
        ElMessageBox.confirm(
                '是否要删除?',
                '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                deletee(row.id).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        select()
                    }
                })

            })

    }
</script>